<template>
  <div class="footer-wrapper" :style="{ 'background-color': props.backColor }">
    <div class="footer">
      <!-- 波浪动画 -->
      <div class="wave-container">
        <div class="wave wave-1">
          <van-image :src="wave2" fit="cover" />
        </div>
        <div class="wave wave-2">
          <van-image :src="wave2" fit="cover" />
        </div>
        <div class="wave wave-3">
          <van-image :src="wave1" fit="cover" />
        </div>
        <div class="wave wave-4">
          <van-image :src="wave1" fit="cover" />
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="content">
        <div class="section logos">
          <van-image :src="logo1" fit="cover" class="logo" />
          <van-image :src="logo2" fit="cover" class="logo" />
        </div>

        <van-divider />

        <div class="section contact">
          <div class="contact-item">
            <van-icon name="location" color="#fff" size="20" />
            <p>陕西省西安市莲湖区静安广场2号楼22楼</p>
          </div>
          <div class="contact-item">
            <van-icon name="phone" color="#fff" size="20" />
            <p>029 - 88866102 / 18192362927</p>
          </div>
          <div class="contact-item">
            <van-icon name="invitation" color="#fff" size="20" />
            <p>service@umengdata.com</p>
          </div>
        </div>

        <van-divider />

        <div class="section navigation">
          <div class="nav-group">
            <div class="nav-item" @click="godetailPage(1)">网站首页</div>
            <div class="nav-item" @click="godetailPage(2)">业务领域</div>
            <div class="nav-item" @click="godetailPage(3)">关于我们</div>
          </div>

          <div class="nav-group">
            <div class="nav-title">案例展示</div>
            <div class="sub-nav">
              <div class="nav-item" @click="godetailPage(4)">渠道数据采集</div>
              <div class="nav-item" @click="godetailPage(5)">渠道数据清洗</div>
              <div class="nav-item" @click="godetailPage(6)">企业AI助手</div>
              <div class="nav-item" @click="godetailPage(7)">主数据管理</div>
              <div class="nav-item" @click="godetailPage(8)">
                HR考勤数据汇总
              </div>
              <div class="nav-item" @click="godetailPage(9)">集团审计管理</div>
            </div>
          </div>
        </div>

        <van-divider />

        <div class="section qr-code">
          <van-image :src="qrPng" width="100" height="100" />
          <p>扫码咨询</p>
        </div>
      </div>

      <!-- 版权信息 -->
      <div class="copyright">
        Copyright © 2025 西安友盟智能科技 版权所有
        <br class="mobile-break" />
        ICP备案号：陕ICP备2022001341号
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { useRouter } from "vue-router";
import wave1 from "@/assets/img/01.png";
import wave2 from "@/assets/img/02.png";
import logo1 from "@/assets/img/home/logo2.png";
import logo2 from "@/assets/img/home/logo6.png";
import qrPng from "@/assets/img/qr.png";

const router = useRouter();

const props = defineProps({
  backColor: {
    type: String,
    default: "#FFF",
  },
});

const godetailPage = (i: number) => {
  const routes = {
    1: "mobile_home",
    2: "mobile_business",
    3: "mobile_about",
    4: "Exampleitem2", // 渠道数据采集
    5: "Exampleitem3", // 渠道数据清洗
    6: "Exampleitem4", // AI分析助手
    7: "Exampleitem", // 主数据管理
    8: "Exampleitem5", // HR考勤数据汇总
    9: "Exampleitem6", // 集团审计管理
  };

  router.push({
    name: routes[i as keyof typeof routes],
  });
};
</script>

<style lang="scss" scoped>
.footer-wrapper {
  position: relative;
  overflow: hidden;
}

.footer {
  --footer-background: #00a0da;
  position: relative;
  min-height: 12rem;
  color: #fff;
}

// 波浪动画
.wave-container {
  position: relative;
  overflow: hidden;
  height: 50px;
  .wave {
    position: absolute;
    bottom: -8px;
    width: 100%;

    img {
      display: block;
      width: 100%;
    }
  }

  .wave-1 {
    animation: waveMove 10s infinite linear;
  }

  .wave-2 {
    animation: waveMove 10s 5s infinite linear;
    transform: translateX(100%);
  }

  .wave-3 {
    animation: waveInitial 10s linear, waveMove 20s 10s infinite linear;
  }

  .wave-4 {
    animation: waveMove 20s infinite linear;
    transform: translateX(100%);
  }
}

// 主要内容区域
.content {
  position: relative;
  z-index: 2;
  padding: 20px;
  background: var(--footer-background);

  @media (min-width: 768px) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3rem 10%;
  }
}

.section {
  margin-bottom: 20px;

  @media (min-width: 768px) {
    margin-bottom: 0;
  }
}

// Logo部分
.logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  .logo {
    width: 150px;
  }
}

// 联系信息
.contact {
  .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .van-icon {
      margin-right: 10px;
    }

    p {
      font-size: 14px;
      margin: 0;
    }
  }
}

// 导航菜单
.navigation {
  .nav-group {
    margin-bottom: 20px;
  }

  .nav-title {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .nav-item {
    padding: 5px 0;
    cursor: pointer;
    font-size: 14px;

    &:hover {
      opacity: 0.8;
    }
  }

  .sub-nav {
    padding-left: 10px;
  }
}

// 二维码
.qr-code {
  text-align: center;

  p {
    margin-top: 10px;
    font-size: 14px;
  }
}

// 分隔线
:deep(.van-divider) {
  margin: 20px 0;
  border-color: rgba(255, 255, 255, 0.2);

  @media (min-width: 768px) {
    height: 150px;
    margin: 0 20px;
  }
}

// 版权信息
.copyright {
  background-color: #47ceff;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
}

// 动画关键帧
@keyframes waveMove {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes waveInitial {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

// 移动端特定样式
.mobile-break {
  display: block;

  @media (min-width: 768px) {
    display: none;
  }
}

// 响应式调整
@media (max-width: 767px) {
  .content {
    flex-direction: column;
  }

  .section {
    width: 100%;
  }

  :deep(.van-divider--vertical) {
    display: none;
  }
}
</style>
